<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="jakarta.tags.fmt" %>
<!DOCTYPE html>
<html>
<head>
    <title>修改员工信息</title>
    <style>
        /* 整体页面背景设置为浅灰色系，营造简洁科技感 */
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f5;
            margin: 0;
            padding: 0;
            color: #333;
        }

        /* 页面主容器，设置宽度、居中、内边距、背景色及轻微阴影效果，适当调整宽度等 */
        .main-container {
            width: 80%;
            margin: 50px auto;
            padding: 30px;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        /* 标题样式，字体大小、加粗、颜色及下边距，适当调整字体大小等 */
        h1 {
            font-size: 30px;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 20px;
        }

        /* 表单样式，去除原有的部分自定义样式，利用 Bootstrap 样式 */
        form {
            padding: 20px;
            border-radius: 8px;
            background-color: #f9f9f9;
        }

        /* 表单标签样式，利用 Bootstrap 自带的表单标签样式，适当调整字体粗细等 */
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }

        /* 表单输入框样式，利用 Bootstrap 输入框样式进行调整 */
        input[type="text"],
        input[type="password"],
        input[type="number"] {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="number"]:focus {
            border-color: #007bff;
        }

        /* 下拉菜单样式，利用 Bootstrap 下拉菜单样式进行美化 */
        select {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 10px center;
            background-size: 12px 12px;
        }

        /* 错误提示信息样式，适当调整显示效果 */
        .error-message {
            color: #dc3545;
            margin-bottom: 15px;
            font-size: 16px;
            display: none;
        }

        /* 编号已存在提示信息样式，适当调整显示效果 */
        .id-exists-message {
            color: #dc3545;
            margin-bottom: 15px;
            font-size: 16px;
            display: none;
        }

        /* 只读输入框样式，使其更明显的展示为只读 */
        input[readonly] {
            background-color: #e9ecef;
            border-color: #ced4da;
            cursor: not-allowed;
        }

        /* 按钮容器样式，用于将提交和返回按钮分开并控制间距 */
        .button-container {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        /* 提交按钮样式，使用 Bootstrap 的 btn 类和自定义样式 */
        .submit-button {
            display: inline-block;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 3px;
            font-size: 16px;
            color: white;
            background-color: #28a745;
            transition: background-color 0.3s ease;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        .submit-button:hover {
            opacity: 0.8;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        /* 返回按钮样式，使用 Bootstrap 的 btn 类和自定义样式 */
        .back-button {
            display: inline-block;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 3px;
            font-size: 16px;
            color: white;
            background-color: #6c757d;
            transition: background-color 0.3s ease;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
            cursor: pointer;
        }

        .back-button:hover {
            opacity: 0.8;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {
            function validateForm() {
                var isValid = true;
                var passwordError = $("#passwordError");
                var nameError = $("#nameError");
                var ageError = $("#ageError");
                var authorityLevelError = $("#authorityLevelError");

                // 员工密码验证
                var password = $("#password").val();
                if (password === '') {
                    passwordError.show();
                    isValid = false;
                } else if (password.length < 6) {
                    passwordError.html('员工密码长度至少为6位');
                    passwordError.show();
                    isValid = false;
                } else {
                    passwordError.hide();
                }

                // 员工姓名验证
                var name = $("#name").val();
                if (name === '') {
                    nameError.show();
                    isValid = false;
                } else {
                    nameError.hide();
                }

                // 员工年龄验证
                var age = $("#age").val();
                if (age === '') {
                    ageError.show();
                    isValid = false;
                } else if (isNaN(age) || age < 18 || age > 60) {
                    ageError.html('员工年龄必须为整数且取值范围18 - 60');
                    ageError.show();
                    isValid = false;
                } else {
                    ageError.hide();
                }

                // 员工权限等级验证，此处因为是下拉菜单选择，且有required属性，理论上只要提交就应该有值，这里简单判断下是否为空
                var authorityLevel = $("#authorityLevel").val();
                if (authorityLevel === '') {
                    authorityLevelError.show();
                    isValid = false;
                } else {
                    authorityLevelError.hide();
                }

                return isValid;
            }

            $("#updateForm").submit(function (e) {
                e.preventDefault();
                if (validateForm()) {
                    var formData = $(this).serialize();
                    $.ajax({
                        url: 'person.action?action=update',
                        type: 'POST',
                        data: formData,
                        success: function (result) {
                            if (result.startsWith("修改成功")) {
                                Swal.fire({
                                    icon: 'success',
                                    title: '成功',
                                    text: '员工信息修改成功',
                                }).then(function () {
                                    // 刷新到指定页面，例如 index.html
                                    window.location.href = 'person.action?action=list';
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: '失败',
                                    text: result
                                }).then(function (){
                                    window.location.reload();
                                });
                            }
                        },
                        error: function (xhr, status, error) {
                            Swal.fire({
                                icon: 'error',
                                title: '请求出错',
                                text: '出现网络问题或服务器错误，请稍后再试'
                            });
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>
<div class="main-container">
    <h1>修改员工信息</h1>
    <form action="person.action?action=update" method="post" id="updateForm">
        <!-- 将人员 id 显示出来，但设置为只读，不能修改 -->
        <label for="id">员工 ID</label>
        <input type="text" id="id" name="id" value="${person.id}" readonly>
        <label for="password">员工密码</label>
        <input type="password" id="password" name="password" value="${person.password}" required>
        <span class="error-message" id="passwordError">员工密码不能为空，且长度至少为 6 位</span>

        <label for="name">员工姓名</label>
        <input type="text" id="name" name="name" value="${person.name}" required>
        <span class="error-message" id="nameError">员工姓名不能为空</span>

        <label for="age">员工年龄</label>
        <input type="number" id="age" name="age" value="${person.age}" required>
        <span class="error-message" id="ageError">员工年龄必须为整数且不能为空，取值范围 18 - 60</span>

        <label for="authorityLevel">员工权限等级</label>
        <select id="authorityLevel" name="authorityLevel" required>
            <option value="1">管理员</option>
            <option value="2">普通员工</option>
        </select>
        <span class="error-message" id="authorityLevelError">员工权限等级必须选择</span>

        <!-- 使用按钮容器将提交和返回按钮包裹，实现更好的布局和间距控制 -->
        <div class="button-container">
            <input type="submit" class="submit-button" value="提交">
            <a href="person.action?action=list" class="back-button">返回</a>
        </div>
    </form>
</div>
</body>
</html>